<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{fullName}}</span> <br>
    <button @click="changeFullName">我是你爹</button>
  </div>
</template>

<script setup lang="ts" name="App">
import {ref,computed} from 'vue'

let firstName = ref('zhang')
let lastName = ref('san')

// 计算属性——只读取，不修改
/* let fullName = computed(()=>{
  return firstName.value + '-' + lastName.value
}) */


// 计算属性——既读取又修改
let fullName = computed({
  // 读取
  get(){
    return firstName.value + '-' + lastName.value
  },
  // 修改
  set(val){
    console.log('有人修改了fullName',val)
    firstName.value = val.split('-')[0]
    lastName.value = val.split('-')[1]
  }
})

function changeFullName(){
  fullName.value = '我是你爹'
}
</script>